<!DOCTYPE html>
<html>

<head>
    <title>调试测试</title>
    <script src="js/vue-2.5.16.js"></script>
    <script src="js/axios-0.18.0.min.js"></script>
    <script src="js/host.js"></script>
    <script src="js/common.js"></script>
</head>

<body>
    <div id="app">
        <h2>地址数量: {{ addresses.length }}</h2>
        <button @click="testAddAddress">测试添加地址</button>
        <div v-for="(address, index) in addresses" :key="address.id">
            {{ address.title }} - {{ address.receiver }}
        </div>
    </div>

    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                host: host,
                addresses: []
            },
            mounted: function () {
                this.getAddresses();
            },
            methods: {
                getAddresses: function () {
                    axios.get(this.host + '/addresses/', {
                        responseType: 'json',
                        withCredentials: true
                    })
                        .then(response => {
                            console.log('获取地址响应:', response.data);
                            if (response.data && Array.isArray(response.data.addresses)) {
                                this.addresses = response.data.addresses;
                            }
                        })
                        .catch(error => {
                            console.error('获取地址失败:', error);
                        });
                },
                testAddAddress: function () {
                    var testData = {
                        title: '测试地址',
                        receiver: '测试用户',
                        province_id: 110000,
                        city_id: 110100,
                        district_id: 110101,
                        place: '测试地点',
                        mobile: '13800138000'
                    };

                    console.log('准备发送测试请求:', testData);

                    axios.post(this.host + '/addresses/create/', testData, {
                        responseType: 'json',
                        withCredentials: true
                    })
                        .then(response => {
                            console.log('添加地址响应:', response.data);
                            if (response.data && response.data.address) {
                                this.addresses.unshift(response.data.address);
                                console.log('地址已添加到数组，当前数量:', this.addresses.length);
                            }
                        })
                        .catch(error => {
                            console.error('添加地址失败:', error);
                            if (error.response) {
                                console.error('错误响应:', error.response.data);
                            }
                        });
                }
            }
        });
    </script>
</body>

</html>